<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>我的报名活动</title>
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> -->
	<meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">
	<script type="text/javascript">
		function setWidth(e) { if (/Andriod/i.test(navigator.userAgent)) { var f, d = window.innerWidth; (d != e) && (f = d / e), document.addEventListener("DOMContentLoaded", function () { var a = document.getElementsByTagName("body")[0]; a.style.webkitTransformOrigin = "left top"; a.style.webkitTransform = "scale(" + f + ")" }, !1) } } setWidth(750);
	</script>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<!--标准mui.css-->
	<link rel="stylesheet" href="css/mui.min.css">
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="css/common.css"/>
	<link rel="stylesheet" type="text/css" href="css/apply_team.css"/>
</head>
<body>
	<!--侧滑菜单容器  - 最大容器-->
	<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
		<!--右侧菜单部分-->


		<aside id="offCanvasSide" class="mui-off-canvas-right my-mui-draggable">
			<div id="offCanvasSideScroll" class="mui-scroll-wrapper ">
				<div class="mui-scroll ">
					<div class="content my-content">
						<p>
							<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block my-btn">×</button>
						</p>
					</div>
					<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted my-table-view my-mui-table-view-cell">
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="index.html" class="mui-navigate-right my-mui-navigate-right">
								首页
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="contact_us.html" class="mui-navigate-right my-mui-navigate-right">
								关于金鸿基
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="match.html" class="mui-navigate-right my-mui-navigate-right">
								赛事中心
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="video_list.html" class="mui-navigate-right my-mui-navigate-right">
								赛事视频
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="apply_team.html" class="mui-navigate-right my-mui-navigate-right">
								报名中心
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="team_detail.html" class="mui-navigate-right my-mui-navigate-right">
								直播间
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="about_us.html" class="mui-navigate-right my-mui-navigate-right">
								公司资讯
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="my-team.html" class="mui-navigate-right my-mui-navigate-right">
								服务中心
							</a>
						</li>
						<li class="mui-table-view-cell my-mui-table-view-cell">
							<a href="contact_us.html" class="mui-navigate-right my-mui-navigate-right">
								联系我们
							</a>
						</li>
					</ul>
					<div class="footbtn">
						<a href="register.html" class="my-text">
							登录
						</a>
					</div>
				</div>
			</div>
		</aside>



		<!--主页部分-->
		<div class="mui-inner-wrap">
			<!--页面头部-->
			<header class="mui-bar mui-bar-nav my-mui-bar">
				<a class="mui-action-back mui-icon mui-pull-left">
					<img src="images/logo.png" alt="">
				</a>
				<h1 class="mui-title"></h1>
				<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-icon-bars mui-pull-right my-nav"></a>
			</header>
			<!--页面内容-->
			<div id="offCanvasContentScroll" class=" mui-scroll-wrapper">
				<div class=" my-mui-content">
					<div class="main">
						<h1>完成报名即可报名参赛</h1>
						<div class="icons">
							<span class="line"></span>
							<div class="con2">
								<div class="con2-1"></div>
							</div>
							<div class="con1"></div>
							<div class="con1 con1s"></div>
						</div>
						<div class="text">
							<span class="text1">我的报名活动</span>
							<span class="text2">信息核对/付款</span>
							<span class="text3">报名完成</span>
							<div class="clear"></div>
						</div>
					</div>
					<div class="bg-color"></div>
					<div class="world">
						<div class="mui-content my-world-content">
								<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary my-mui-segmented-control">
									<a class="mui-control-item my-mui-control-item  mui-active" href="#item1">个人报名</a>
									<a class="mui-control-item my-mui-control-item " href="#item2">团队报名</a>
								</div>
							<div>
								<div id="item1" class="mui-control-content mui-active">
									<div id="scroll" class="mui-scroll-wrapper">
										<div class="mui-scroll my-input">
											<table width="624px">
										<tr>
											<td>项目名称：</td>
											<td colspan="3"><div class="mui-input-row"><input id="project1" name="project1" type="text" class="mui-input-clear inputs"></div></td>
										</tr>
										<tr>
											<td>姓名：</td>
											<td colspan="3"><div class="mui-input-row"><input id="username1" name="username1" type="text" class="mui-input-clear inputs"></div></td>
										</tr>
										<tr>
											<td>联系电话：</td>
											<td colspan="3"><div class="mui-input-row"><input id="photo1" name="photo1" type="text" class="mui-input-clear inputs"></div></td>
										</tr>
										<tr>
											<td>身份证号码：</td>
											<td colspan="3"><div class="mui-input-row"><input id="cardID1" name="cardID1" type="text" class="mui-input-clear inputs"></div></td>
										</tr>
										<tr>
											<td width="144px">人均消费：</td>
											<td width="140px"><div class="mui-input-row"><input id="price1" name="price1" type="text" class="mui-input-clear inputs inputs-end"></div></td>
											<td width="200px" class="first-td">合计费用：</td>
											<td width="140px"><div class="mui-input-row"><input name="prices1" type="text" class="mui-input-clear inputs inputs-end"></div></td>
										</tr>
									</table>
											<div class="btn-go">
												<div class="btnGo btn1">立即报名</div>
											</div>
										</div>
									</div>
								</div>
								<div id="item2" class="mui-control-content my-input">
									<table width="624px">
										<tr>
											<td>团队名称：</td>
											<td colspan="3"><div class="mui-input-row"><input id="project2" id="project2" name="project2" type="text" class="mui-input-clear inputs"></div></td>
										</tr>
										<tr>
											<td>活动人数：</td>
											<td colspan="3"><div class="mui-input-row"><input id="num2" name="num2" type="text" class="mui-input-clear inputs"></div></td>
										</tr>
										<tr>
											<td>联系电话：</td>
											<td colspan="3"><div class="mui-input-row"><input id="photo2" name="photo2" type="text" class="mui-input-clear inputs"></div></td>
										</tr>
										<tr>
											<td>身份证号码：</td>
											<td colspan="3"><div class="mui-input-row"><input id="cardID2" name="cardID2" type="text" class="mui-input-clear inputs"></div></td>
										</tr>
										<tr>
											<td width="144px">人均消费：</td>
											<td width="140px"><div class="mui-input-row"><input id="price2" name="price2" type="text" class="mui-input-clear inputs inputs-end"></div></td>
											<td width="200px" class="first-td">合计费用：</td>
											<td width="140px"><div class="mui-input-row"><input id="prices2" name="prices2" type="text" class="mui-input-clear inputs inputs-end"></div></td>
										</tr>
									</table>
									<div class="btn-go">
										<div class="btnGo btn2">立即报名</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- off-canvas backdrop -->
			<div class="mui-off-canvas-backdrop"></div>
		</div>
	</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="layer-v3.1.1/layer/layer.js"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });

    })(mui);


    /* 表单验证 输入验证 */

    /* 选项卡列表1 */
    // project1
    var project1_bool = false;
    mui(".mui-input-row").on("click", "#project1", function() {
        layer.tips('<span style="font-size: .38rem;display: block;">只能输入1到8个汉字</span>', '#project1', {
            tips: [1, '#0FA6D8'] //还可配置颜色
        });
    });

    document.getElementsByName('project1')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^[\u4e00-\u9fa5]{1,8}$/)) {//我习惯用match
            $(this).css('borderColor','red');
            project1_bool = false;
        }else{
            $(this).css('borderColor','green');
            project1_bool = true;
		}
    });

    // username1
    var username1_bool = false;
    mui(".mui-input-row").on("click", "#username1", function() {
        layer.tips('<span style="font-size: .38rem;display: block;">只能输入中文和英文</span>', '#username1', {
            tips: [1, '#0FA6D8'] //还可配置颜色
        });
    });

    document.getElementsByName('username1')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^[\u4E00-\u9FA5A-Za-z]+$/)) {//我习惯用match
            $(this).css('borderColor','red');
            username1_bool = false;
        }else{
            $(this).css('borderColor','green');
            username1_bool = true;
        }
    });

    // photo1
    var photo1_bool = false;
    mui(".mui-input-row").on("click", "#photo1", function() {
        layer.tips('<span style="font-size: .38rem;display: block;">输入手机号码</span>', '#photo1', {
            tips: [1, '#0FA6D8'] //还可配置颜色
        });
    });

    document.getElementsByName('photo1')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^1(3|4|5|7|8)\d{9}$/)) {//我习惯用match
            $(this).css('borderColor','red');
            photo1_bool = false;
        }else{
            $(this).css('borderColor','green');
            photo1_bool = true;
        }
    });

    // cardID1
    var cardID1_bool = false;
    document.getElementsByName('cardID1')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/)) {//我习惯用match
            $(this).css('borderColor','red');
            cardID1_bool = false;
        }else{
            $(this).css('borderColor','green');
            cardID1_bool = true;
        }
    });

    // price1
    var price1_bool = false;
    document.getElementsByName('price1')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^[0-9]+$/)&&!str.match(/^[0-9]+\.?[0-9]+?$/)) {//我习惯用match
            $(this).css('borderColor','red');
            price1_bool = false;
            prices1_bool = false;
            mui('input[name="prices1"]')[0].value=this.value;
        }else{
            $(this).css('borderColor','green');
            mui('input[name="prices1"]')[0].value=this.value;
            prices1_bool = true;
            price1_bool = true;
        }
    });

    // prices1
    var prices1_bool = false;
    document.getElementsByName('prices1')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^[0-9]+$/)&&!str.match(/^[0-9]+\.?[0-9]+?$/)) {//我习惯用match
            $(this).css('borderColor','red');
            prices1_bool = false;
            price1_bool = false;
            mui('input[name="price1"]')[0].value=this.value;
        }else{
            $(this).css('borderColor','green');
            mui('input[name="price1"]')[0].value=this.value;
            prices1_bool = true;
            price1_bool = true;
        }
    });


    /* 选项卡列表 2 */
    // project2
    var project2_bool = false;
    mui(".mui-input-row").on("click", "#project2", function() {
        layer.tips('<span style="font-size: .38rem;display: block;">只能输入1到8个汉字</span>', '#project2', {
            tips: [1, '#0FA6D8'] //还可配置颜色
        });
    });

    document.getElementsByName('project2')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^[\u4e00-\u9fa5]{1,8}$/)) {//我习惯用match
            $(this).css('borderColor','red');
            project2_bool = false;
        }else{
            $(this).css('borderColor','green');
            project2_bool = true;
        }
    });

    // num2
    var num2_bool = false;
    mui(".mui-input-row").on("click", "#num2", function() {
        layer.tips('<span style="font-size: .38rem;display: block;">只能大于0的整数</span>', '#num2', {
            tips: [1, '#0FA6D8'] //还可配置颜色
        });
    });

    document.getElementsByName('num2')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^[0-9]+$/)) {//我习惯用match
            $(this).css('borderColor','red');
            num2_bool = false;
        }else{
            $(this).css('borderColor','green');
            num2_bool = true;
        }
    });

    // photo2
    var photo2_bool = false;
    mui(".mui-input-row").on("click", "#photo2", function() {
        layer.tips('<span style="font-size: .38rem;display: block;">输入手机号码</span>', '#photo2', {
            tips: [1, '#0FA6D8'] //还可配置颜色
        });
    });

    document.getElementsByName('photo2')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^1(3|4|5|7|8)\d{9}$/)) {//我习惯用match
            $(this).css('borderColor','red');
            photo2_bool = false;
        }else{
            $(this).css('borderColor','green');
            photo2_bool = true;
        }
    });

    // cardID2
    var cardID2_bool = false;
    document.getElementsByName('cardID2')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/)) {//我习惯用match
            $(this).css('borderColor','red');
            cardID2_bool = false;
        }else{
            $(this).css('borderColor','green');
            cardID2_bool = true;
        }
    });

    // price2
    var price2_bool = false;
    document.getElementsByName('price2')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^[0-9]+$/)&&!str.match(/^[0-9]+\.?[0-9]+?$/)) {//我习惯用match
            $(this).css('borderColor','red');
            price2_bool = false;
        }else{
            $(this).css('borderColor','green');
            price2_bool = true;
        }
    });

    // prices2
    var prices2_bool = false;
    document.getElementsByName('prices2')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^[0-9]+$/)&&!str.match(/^[0-9]+\.?[0-9]+?$/)) {//我习惯用match
            $(this).css('borderColor','red');
            prices2_bool = false;
        }else{
            $(this).css('borderColor','green');
            prices2_bool = true;
        }
    });

    /*点击 立即报名 验证表单*/

    mui(".btn-go").on("tap",".btn1",btn1);/*因为mui框架屏蔽了点击事件*/
    function btn1() {
        // 点击按钮判断表单验证是否正确
        if(!project1_bool){
            layer.msg('项目名称输入错误！');
            return;
        }
        if(!username1_bool){
            layer.msg('姓名输入错误！');
            return;
        }
        if(!photo1_bool){
            layer.msg('联系电话输入错误！');
            return;
        }
        if(!cardID1_bool){
            layer.msg('身份证号码输入错误！');
            return;
        }
        if(!price1_bool){
            layer.msg('人均消费输入错误！');
            return;
        }
        if(!prices1_bool){
            layer.msg('合计费用输入错误！');
            return;
        }

        // json 数据创建
        var json = {
            item:1,
            project:mui('input[name="project1"]')[0].value,
            username:mui('input[name="username1"]')[0].value,
            photo:mui('input[name="photo1"]')[0].value,
            cardID:mui('input[name="cardID1"]')[0].value,
            price:mui('input[name="price1"]')[0].value,
            prices:mui('input[name="prices1"]')[0].value,
		};
        //保存数据到sessionStorage
        sessionStorage.setItem('json',JSON.stringify(json));
        window.location.href='pay.html';
    }

    mui(".btn-go").on("tap",".btn2",btn2);/*因为mui框架屏蔽了点击事件*/
    function btn2() {

        // 点击按钮判断表单验证是否正确
        if(!project2_bool){
            layer.msg('团队名称输入错误！');
            return;
        }
        if(!num2_bool){
            layer.msg('活动人数输入错误！');
            return;
        }
        if(!photo2_bool){
            layer.msg('联系电话输入错误！');
            return;
        }
        if(!cardID2_bool){
            layer.msg('身份证号码输入错误！');
            return;
        }
        if(!price2_bool){
            layer.msg('人均消费输入错误！');
            return;
        }
        if(!prices2_bool){
            layer.msg('合计费用输入错误！');
            return;
        }
        var a = parseFloat(mui('input[name="price2"]')[0].value);
        var b = parseFloat(mui('input[name="prices2"]')[0].value);
        var c = parseFloat(mui('input[name="num2"]')[0].value);
        var k = a*c;
        if(k!=b){
            layer.msg('合计费用输入错误！合计费用为'+k);
            return;
        }
        // 数据存储
        var json = {
            item:2,
            project:mui('input[name="project2"]')[0].value,
            num:mui('input[name="num2"]')[0].value,
            photo:mui('input[name="photo2"]')[0].value,
            cardID:mui('input[name="cardID2"]')[0].value,
            price:mui('input[name="price2"]')[0].value,
            prices:mui('input[name="prices2"]')[0].value,
        };
        //保存数据到sessionStorage
        sessionStorage.setItem('json',JSON.stringify(json));
        window.location.href='pay.html';
    }


    var href=document.getElementsByTagName('a');

    for(var i=0;i<href.length;i++){
        href[i].ontouchend=function(){
            window.location.href=this.getAttribute("href");
        }
    };
</script>
</html>